<template>
  <div class="charts-container">
    <div v-for="(chart, index) in charts" :key="index" :style="{ width: chart.width || '600px', height: chart.height || '400px' }" class="chart-item">
      <div :id="'echarts-dom-' + index" class="echart-dom"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import china from 'echarts/map/json/china.json';

echarts.registerMap('china', china);

require("echarts/theme/macarons");

export default {
  name: "DataCharts",
  props: {
    charts: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      instances: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.renderCharts();
    });
  },
  methods: {
    renderCharts() {
      this.instances.forEach(instance => instance.dispose());
      this.instances = [];

      this.charts.forEach((chart, index) => {
        const dom = document.getElementById(`echarts-dom-${index}`);
        if (!dom) return;

        const chartInstance = echarts.init(dom, null);
        chartInstance.setOption(chart.option);
        this.instances.push(chartInstance);

        window.addEventListener("resize", () => {
          chartInstance.resize();
        });
      });
    }
  },
  beforeUnmount() {
    this.instances.forEach(instance => instance.dispose());
  }
};
</script>

<style scoped>
.charts-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.chart-item {
  flex: 1;
  min-width: 500px;
  max-width: 800px;
}
.echart-dom {
  width: 100%;
  height: 100%;
}
</style>